<template>
  <div class="questionAnswer">
    <div class="lists-top">
      <lists-nav :navData="navData" @changeOrderType='changeOrderType'></lists-nav>
    </div>
    <div class="lists-wrapper">
      <div v-if="navData.curType == 1">
        <question-type-one ref="one"></question-type-one>
      </div>
      
      <div v-if="navData.curType == 2">
        <question-type-two ref="tow"></question-type-two>
      </div>
      
      <div v-if="navData.curType == 3">
        <question-type-three ref="three"></question-type-three>
      </div>
      
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import listsNav from './listsNav/index'
  import questionTypeOne from './questionTypeOne'
  import questionTypeTwo from './questionTypeTwo'
  import questionTypeThree from './questionTypeThree'
  export default Vue.extend({
    name: 'index',
    components: {
      listsNav,
      questionTypeOne,
      questionTypeTwo,
      questionTypeThree
    },
    data() {
      return {
        navData: {
          curType: 1
        },
        postData: {
          page: 1,
          per_page: 10
        }
      }
    },
    methods: {
      // 切换订单类型
      changeOrderType(type) {
        this.navData.curType = type
      }
    },
    mounted() {
      // TODO 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        if (this.navData.curType == 1) {
          this.$refs.one.onLoad()
        } else if (this.navData.curType == 2) {
          this.$refs.tow.onLoad()
        } else if (this.navData.curType == 3) {
          this.$refs.three.onLoad()
        }
        
      })
    }
  })
</script>

<style lang="scss">
  .lists-top{
    position:fixed;
    top:0;
    left:0;
    z-index:3;
    width:100%;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
  }
  .lists-wrapper{
    padding-top:100px;
  }
</style>
